﻿<template>
    <div class="loginWrap" >
      <div class="loginCenterWrap">
        <div style="text-align: center;margin-bottom: 46px;line-height: 50px;">
          <h1 style="font-size: 35px;color:#3975FE;display: inline-block;vertical-align: middle; margin-left: 10px;">互联网租赁自行车综合治理平台</h1>
        </div>
        <div  class="loginCenter">
          <div style="display: inline-block;">
            <div style="display: inline-block;float: left;"><img src="./images/loginImg.png" height="443px"/></div>
            <div class="loginContent">
              <div class="inputWrap"><img src="./images/user.png" class="iconImgSty" style="" height="20" width="20"/>
                <el-input class="inputLogin" :maxlength="20" v-model="account" placeholder="请输入用户名"></el-input></div>
              <div class="inputWrap"><img src="./images/passWord.png" class="iconImgSty" height="20" width="20"/>
                <el-input class="inputLogin" :maxlength="20" type="password"  v-model="password" placeholder="请输入密码"></el-input>
              </div>
              <div class="inputWrap">
                <el-input style="width: 121px;height: 36px;margin-right: 3px;" v-model="code" placeholder="验证码"> </el-input>
                <img class="imgCodeStyle"   alt="验证码"  @click="getSrc" :src="src"/>
                <!--<img style="vertical-align: middle;border-radius: 5px;width: 100px;height: 38px;"  alt="验证码"  @click="getSrc" src="./images/defaultKaptcha.jpg"/>-->
              </div>
              <div class="inputWrap"><el-button @click="submit" style="color: #3975FE;height: 38px;">登 录</el-button></div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>

  export default {
    data(){
      return {
        account:"",
        password:"",
        code:"",
        src: process.env.API_HOST+"/system/code?d=" + new Date() * 1,
      }
    },
    methods: {
      getSrc(){
        this.src = process.env.API_HOST+"/system/code?d=" + new Date() * 1
      },

      submit(){
        if(!this.account){
          this.$message({
            type: 'warning',
            message: '请正确输入用户名!'
          });
          return
        }else if(!this.code){
          this.$message({
            type: 'warning',
            message: '请输入验证码!'
          });
          return
        }else if(!this.password){
          this.$message({
            type: 'warning',
            message: '请输入密码!'
          });
          return
        }
        this.axios.post( process.env.API_HOST +'/system/login', {
          account:this.account,
          password:this.signPw(this.password),
          code:this.code
        })
          .then(response => {
            let result = response.data
            if (result.code == 200) {
              this.$message({
                type: 'success',
                message: '登录成功!'
              });
              localStorage.setItem('isLogin',true);
              localStorage.setItem('userInfo',JSON.stringify(result.result));
              this.$store.commit("getLoginInfo",result.result)
              this.getSelectRoleMenu(result.result.roleId)
              this.$emit("getNavInfo")

              setTimeout(()=>{
                this.$router.push("/homePage")
              },500)

            } else {
              this.code = ''
            }
            this.getSrc()
          })

      },
      getSelectRoleMenu(roleId){
        this.axios.post(process.env.API_HOST + "/system/selectRoleMenu", {roleId: roleId})
          .then(response => {
            const result = response.data
            if (result.code === 200) {
              let arr=[]
              result.result.forEach(item => {
                arr.push(item.menuId)
              })
              localStorage.setItem('getBtnMenuIds',JSON.stringify(arr));
              this.$store.commit("getBtnMenuIds",arr)
            }
          })
      },
      loginBtn(e){
        let _this = this
        let keyNum = e.keyCode;       //获取被按下的键值
        //判断如果用户按下了回车键（keycody=13）
        if (keyNum == 13) {
          setTimeout(()=>{
            this.getSrc()
          },200)

          _this.submit('formCustom')
        }

      },
    },
    components: {},
    created(){
      localStorage.clear()
    },
    mounted(){
      let _this = this
      window.addEventListener("keydown", _this.loginBtn);
    },
    destroyed(){
      let _this = this
      window.removeEventListener('keydown', _this.loginBtn)
    },

    watch: {
    }
  }
</script>


<style lang="stylus" rel="stylesheet/stylus" >
  @import "../../common/stylus/mixin.styl"
  .loginWrap
    position relative
    width 100%
    height 100%
    background-color white
    .loginCenterWrap
      width 100%
      height 545px;
      position:absolute;
      left:0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      .loginCenter
        background-color:#3975FE;
        text-align: center;
        height 443px;
        .loginContent
          width 230px
          margin-left 150px
          margin-top 120px
          display inline-block
          .inputWrap
            position relative
            height 38px;
            line-height 36px
            margin-bottom 15px
            width 100%
            .iconImgSty
              position: absolute;left: 12px;top: 8px;z-index: 10;
            .imgCodeStyle
              vertical-align: top;border-radius: 5px;width: 100px;height: 38px;cursor: pointer;
            .inputLogin
              width: 230px;
              height 38px
              width 100%;
            .el-button
              width: 100%;font-size: 16px;padding: 9px 20px;
            .el-input__inner
              text-align center
              line-height 36px
              height 38px !important
              color #3975FE
              font-weight bold

/*input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
  color: #666; 
} 
 input:-moz-placeholder, textarea:-moz-placeholder { 
  color: #666; 
 } 

input::-moz-placeholder, textarea::-moz-placeholder { 
  color: #666; 
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
  color: #666; 
}*/

</style>
